<script setup lang="ts">
import OrderRequest from '@/request/orderRequest';
import OrderOperator from './component/OrderOperator.vue';
import OrderStateCell from './component/OrderStateCell.vue';
import OrderInfoCard from './component/OrderInfoCard.vue';
import EvaluateCard from './component/EvaluateCard.vue';
import BusinessInfoEdit from './component/BusinessInfoEdit.vue';
import LeaseInfo from './component/LeaseInfo.vue';
import OrderExtraInfo from './component/OrderExtraInfo.vue';

interface IState {
  orderId: number;
  mainFlag: number;
  key: number;
  orderInfo?: IOrderDetailInfo;
}

const state = reactive<IState>({ orderId: 0, mainFlag: 0, key: 0 });

onLoad((options) => {
  if (!options) return;
  const { mainFlag, orderId } = options;
  state.mainFlag = mainFlag;
  state.orderId = orderId;
  fetchObtainOrderDetail();
});

// 获取订单详情
const fetchObtainOrderDetail = () => {
  OrderRequest.GetOrderDetail({ id: state.orderId, hasLoading: true }).then((res) => {
    if (!res.data) return;
    const { provinceName, cityName, areaName, streetName, villageName, address, houseNumber } = res.data;
    const addressParts = [provinceName, cityName, areaName, streetName, villageName || address || '', houseNumber || ''];
    state.orderInfo = {
      ...res.data,
      fullAddress: addressParts
        .filter((part) => part)
        .join(' ')
        .trim(),
    };
    state.key++;
  });
};
</script>
<template>
  <view class="c-pd" v-if="state.orderInfo" :key="state.key">
    <!-- 头部订单状态 -->
    <OrderStateCell :data="state.orderInfo" />
    <!-- 订单操作按钮 -->
    <OrderOperator :data="state.orderInfo" @reload="fetchObtainOrderDetail" />
    <!-- 租赁信息 -->
    <LeaseInfo v-if="state.orderInfo.orderType === 3" :data="state.orderInfo" />
    <!-- 商户信息编辑 -->
    <BusinessInfoEdit :data="state.orderInfo" />
    <!-- 产品以及费用信息 -->
    <view class="mb-3">
      <OrderGoodsCard :data="state.orderInfo" />
    </view>
    <!-- 订单产品额外信息 -->
    <OrderExtraInfo :orderInfo="state.orderInfo" />
    <!-- 订单详细信息 -->
    <OrderInfoCard :data="state.orderInfo" />
    <!-- 评价信息组件 -->
    <EvaluateCard v-if="state.orderInfo.evaluateState" :data="state.orderInfo" />
  </view>
</template>
